import { computed, ref, watch } from 'vue'

export const useProps = (props: any) => {
  const label = computed(() => {
    if (props.data.showLabel) {
      return props.data.label
    } else {
      return ''
    }
  })
  const labelWidth = computed(() => {
    if (!props.data.showLabel) {
      return `0px`
    } else if (props.data.labelWidth) {
      return `${props.data.labelWidth}px`
    } else {
      return `${props.form.labelWidth}px`
    }
  })

  return {
    label,
    labelWidth
  }
}

export const useValue = (props: any, emits?: any) => {
  const val = ref()

  watch(
    () => props.data.defaultVal,
    () => {
      val.value = props.data.defaultVal
      if (emits) {
        emits('valueChange', { name: props.data.field, value: val.value })
      }
    },
    { immediate: true }
  )

  watch(
    () => val.value,
    () => {
      props.data.defaultVal = val.value
      if (emits) {
        emits('valueChange', { name: props.data.field, value: val.value })
      }
    }
  )

  return {
    val
  }
}
